<template>
    <div>
       <header>{{store.state.userinfo?.username}}</header>
        <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
</template>
<script lang="ts" setup>
import { useStore } from 'vuex';
import {key} from '@/store/index'


interface Menus{
    createTime: string
    hidden: number
    icon: string | null
    id: number
    level:number
    name: string
    parentId:number
    sort: number
    title: string,
    children?:Menus[]
}
interface menusObj{
    [key:string]:Menus
}
let store = useStore(key)
const menus:menusObj = store.getters.genMenus
console.log(menus);

</script>
<style>

</style>